<template>
  <div class="health-report-container">
    <el-card class="stats-card">
      <template #header>
        <div class="card-header">
          <span>伤病报告统计</span>
          <el-date-picker
            v-model="statsDateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
            @change="loadReportStats"
          />
        </div>
      </template>
      <div class="stats-content" v-loading="statsLoading">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="stats-item">
              <div class="stats-number">{{ reportStats.totalCount || 0 }}</div>
              <div class="stats-label">总伤病报告数</div>
            </div>
          </el-col>
          <el-col :span="6" v-for="(value, key) in reportStats.statusStats" :key="key">
            <div class="stats-item">
              <div class="stats-number">{{ value }}</div>
              <div class="stats-label">{{ key }}</div>
            </div>
          </el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-col :span="12">
            <div class="chart-title">伤病严重程度分布</div>
            <div class="chart-container" ref="severityChartRef"></div>
          </el-col>
          <el-col :span="12">
            <div class="chart-title">伤病报告状态分布</div>
            <div class="chart-container" ref="statusChartRef"></div>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <el-card class="report-list-card">
      <template #header>
        <div class="card-header">
          <span>伤病报告列表</span>
          <div class="header-operations">
            <el-button type="primary" @click="handleExport">批量导出</el-button>
          </div>
        </div>
      </template>

      <div class="search-form">
        <el-form :inline="true" :model="queryParams" ref="queryForm">
          <el-form-item label="关键词">
            <el-input
              v-model="queryParams.keyword"
              placeholder="标题/部位/描述"
              clearable
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item label="日期范围">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleQuery">查询</el-button>
            <el-button @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-table
        v-loading="loading"
        :data="reportList"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange"
        row-key="id"
      >
        <el-table-column type="selection" width="55" align="center" :reserve-selection="true" />
        <el-table-column label="ID" prop="id" width="80" align="center" />
        <el-table-column label="学生" prop="username" width="100" align="center" />
        <el-table-column label="标题" prop="title" min-width="150" show-overflow-tooltip />
        <el-table-column label="受伤部位" prop="bodyPart" width="100" align="center" />
        <el-table-column label="严重程度" prop="severity" width="100" align="center">
          <template #default="scope">
            <el-tag
              :type="
                scope.row.severity === '严重'
                  ? 'danger'
                  : scope.row.severity === '中等'
                    ? 'warning'
                    : 'success'
              "
            >
              {{ scope.row.severity }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="status" width="100" align="center">
          <template #default="scope">
            <el-tag
              :type="
                scope.row.status === '新提交'
                  ? 'danger'
                  : scope.row.status === '处理中'
                    ? 'warning'
                    : scope.row.status === '已解决'
                      ? 'success'
                      : 'info'
              "
            >
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="受伤时间" prop="injuryTime" width="160" align="center" />
        <el-table-column label="提交时间" prop="createdAt" width="160" align="center" />
        <el-table-column label="操作" width="150" align="center">
          <template #default="scope">
            <el-button size="small" @click="handleDetail(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination
          v-model:current-page="queryParams.current"
          v-model:page-size="queryParams.size"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 伤病报告详情对话框 -->
    <el-dialog
      title="伤病报告详情"
      v-model="detailDialogVisible"
      width="700px"
      class="report-detail-dialog"
    >
      <div class="report-detail-content">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="报告ID">{{ currentReport.id }}</el-descriptions-item>
          <el-descriptions-item label="学生">{{ currentReport.username }}</el-descriptions-item>
          <el-descriptions-item label="标题">{{ currentReport.title }}</el-descriptions-item>
          <el-descriptions-item label="受伤部位">{{ currentReport.bodyPart }}</el-descriptions-item>
          <el-descriptions-item label="严重程度">
            <el-tag
              :type="
                currentReport.severity === '严重'
                  ? 'danger'
                  : currentReport.severity === '中等'
                    ? 'warning'
                    : 'success'
              "
            >
              {{ currentReport.severity }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag
              :type="
                currentReport.status === '新提交'
                  ? 'danger'
                  : currentReport.status === '处理中'
                    ? 'warning'
                    : currentReport.status === '已解决'
                      ? 'success'
                      : 'info'
              "
            >
              {{ currentReport.status }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="评估方式" v-if="currentReport.evaluationType">
            {{ currentReport.evaluationType }}
          </el-descriptions-item>
          <el-descriptions-item label="标签" v-if="currentReport.tags">
            <el-tag
              v-for="tag in currentReport.tags"
              :key="tag"
              size="small"
              style="margin-right: 5px"
            >
              {{ tag }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="受伤时间" :span="2">{{
            formatDateTime(currentReport.injuryTime)
          }}</el-descriptions-item>
          <el-descriptions-item label="提交时间" :span="2">{{
            formatDateTime(currentReport.createdAt)
          }}</el-descriptions-item>
          <el-descriptions-item label="伤病描述" :span="2">{{
            currentReport.description
          }}</el-descriptions-item>
          <el-descriptions-item v-if="currentReport.diagnosis" label="诊断结果" :span="2">
            {{ currentReport.diagnosis }}
          </el-descriptions-item>
          <el-descriptions-item v-if="currentReport.treatment" label="治疗建议" :span="2">
            {{ currentReport.treatment }}
          </el-descriptions-item>
        </el-descriptions>

        <!-- 伤病图片展示区域 -->
        <div class="injury-images" v-if="hasInjuryImages">
          <div class="section-title">伤病照片</div>
          <div class="image-gallery">
            <div
              v-for="(url, index) in filteredInjuryImages"
              :key="index"
              class="image-item"
              @click="previewImage(url)"
            >
              <el-image
                :src="url"
                fit="contain"
                :preview-teleported="false"
                :preview-src-list="[]"
                style="width: 100%; height: 100%"
              />
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 导出对话框 -->
    <el-dialog title="批量导出伤病报告" v-model="exportDialogVisible" width="500px">
      <el-form :model="exportForm" label-width="100px">
        <el-form-item label="导出选项">
          <el-radio-group v-model="exportType">
            <el-radio label="selected">仅导出选中项</el-radio>
            <el-radio label="filtered">导出筛选结果</el-radio>
            <el-radio label="custom">自定义条件</el-radio>
          </el-radio-group>
        </el-form-item>

        <template v-if="exportType === 'custom'">
          <el-form-item label="日期范围">
            <el-date-picker
              v-model="exportDateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </template>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="exportDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmExport" :loading="exportLoading"
            >确认导出</el-button
          >
        </span>
      </template>
    </el-dialog>

    <!-- 图片预览 -->
    <el-image-viewer
      v-if="previewVisible"
      :url-list="[previewImageUrl]"
      @close="previewVisible = false"
      :initial-index="0"
      :infinite="false"
      :zoom-rate="1.2"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick, computed } from 'vue'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'
import type { InjuryReport as BaseInjuryReport, InjuryReportStats } from '@/api/health'
import { getInjuryReports, getInjuryReportStats } from '@/api/health'
import * as XLSX from 'xlsx'
import type { InjuryReportQueryParams } from '@/api/health'

// 扩展原有的伤病报告接口，添加新的字段
interface InjuryReport extends BaseInjuryReport {
  tags?: string[]
  evaluationType?: string
  injuryImage1?: string | null
  injuryImage2?: string | null
  injuryImage3?: string | null
  injuryImage4?: string | null
  injuryImage5?: string | null
  injuryImage6?: string | null
  updatedAt?: string
}

// 主查询参数接口，移除了 severity 和 status
interface QueryParams {
  current: number
  size: number
  keyword: string
  startDate?: string
  endDate?: string
}

// 查询参数 reactive 对象
const queryParams = reactive<QueryParams>({
  current: 1,
  size: 10,
  keyword: '',
})

// 日期范围
const dateRange = ref<string[]>([])

// 统计日期范围
const statsDateRange = ref<string[]>([])

// 列表数据
const reportList = ref<InjuryReport[]>([])
const loading = ref(false)
const total = ref(0)
const selectedReports = ref<InjuryReport[]>([])

// 统计数据
const reportStats = ref<InjuryReportStats>({
  totalCount: 0,
  severityStats: {},
  statusStats: {},
  monthlyStats: {},
})
const statsLoading = ref(false)

// 图表引用
const severityChartRef = ref<HTMLElement>()
const statusChartRef = ref<HTMLElement>()
let severityChart: echarts.ECharts | null = null
let statusChart: echarts.ECharts | null = null

// 详情对话框
const detailDialogVisible = ref(false)
const currentReport = ref<InjuryReport>({} as InjuryReport)

// 导出对话框
const exportDialogVisible = ref(false)
const exportType = ref('selected')
const exportForm = reactive({})
const exportDateRange = ref<string[]>([])
const exportLoading = ref(false)

// 图片相关
const injuryImages = ref<string[]>([])
const hasInjuryImages = ref(false)
const previewVisible = ref(false)
const previewImageUrl = ref('')

// 格式化日期时间
const formatDateTime = (dateTimeStr: string | undefined) => {
  if (!dateTimeStr) return '-'

  try {
    const date = new Date(dateTimeStr)
    return date
      .toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
      })
      .replace(/\//g, '-')
  } catch {
    return dateTimeStr
  }
}

// 筛选有效的伤病图片
const filteredInjuryImages = computed(() => {
  return injuryImages.value.filter((url) => url !== null && url !== undefined && url !== '')
})

// 初始化
onMounted(() => {
  loadReportList()
  loadReportStats()
})

// 加载伤病报告列表
const loadReportList = async () => {
  loading.value = true
  try {
    // 处理日期范围
    const params: Partial<QueryParams> = {
      current: queryParams.current,
      size: queryParams.size,
      keyword: queryParams.keyword,
    }
    if (dateRange.value && dateRange.value.length === 2) {
      params.startDate = dateRange.value[0]
      params.endDate = dateRange.value[1]
    } else {
      delete params.startDate
      delete params.endDate
    }

    // 打印查询参数，便于调试
    console.log('查询参数:', JSON.stringify(params, null, 2))

    // 发送请求获取数据
    const res = await getInjuryReports(params)

    // 打印后端返回的原始数据，便于调试
    console.log('后端返回数据:', JSON.stringify(res, null, 2))

    if (res.code === 200 && res.data) {
      // 增加对 res.data 的检查
      reportList.value = res.data.records || []
      total.value = Number(res.data.total) || 0 // 确保 total 是数字类型
      console.log(
        '分页数据: 总条数=',
        total.value,
        '当前页=',
        queryParams.current, // 使用 queryParams.current
        '每页条数=',
        queryParams.size, // 使用 queryParams.size
      )

      // 没有数据时显示提示
      if (reportList.value.length === 0 && queryParams.current === 1) {
        // 仅在第一页且无数据时提示
        ElMessage.info('没有找到符合条件的伤病报告')
      }
    } else {
      ElMessage.error(res.message || '获取伤病报告列表失败')
      reportList.value = [] // 获取失败时清空列表
      total.value = 0 // 获取失败时重置总数
    }
  } catch (error) {
    console.error('获取伤病报告列表出错', error)
    ElMessage.error('获取伤病报告列表失败')
    reportList.value = [] // 异常时清空列表
    total.value = 0 // 异常时重置总数
  } finally {
    loading.value = false
  }
}

// 加载伤病报告统计数据
const loadReportStats = async () => {
  statsLoading.value = true
  try {
    const params: { startDate?: string; endDate?: string } = {}
    if (statsDateRange.value && statsDateRange.value.length === 2) {
      params.startDate = statsDateRange.value[0]
      params.endDate = statsDateRange.value[1]
    }

    const res = await getInjuryReportStats(params)
    if (res.code === 200) {
      reportStats.value = res.data
      nextTick(() => {
        initCharts()
      })
    } else {
      ElMessage.error(res.message || '获取统计数据失败')
    }
  } catch (error) {
    console.error('获取统计数据出错', error)
    ElMessage.error('获取统计数据失败')
  } finally {
    statsLoading.value = false
  }
}

// 初始化图表
const initCharts = () => {
  // 初始化严重程度分布图表
  if (severityChartRef.value) {
    severityChart = echarts.init(severityChartRef.value)
    const severityData = Object.entries(reportStats.value.severityStats).map(([name, value]) => ({
      name,
      value,
    }))

    severityChart.setOption({
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)',
      },
      legend: {
        orient: 'vertical',
        right: 10,
        top: 'center',
        data: severityData.map((item) => item.name),
      },
      series: [
        {
          name: '严重程度',
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2,
          },
          label: {
            show: false,
            position: 'center',
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '15',
              fontWeight: 'bold',
            },
          },
          labelLine: {
            show: false,
          },
          data: severityData,
        },
      ],
    })
  }

  // 初始化状态分布图表
  if (statusChartRef.value) {
    statusChart = echarts.init(statusChartRef.value)
    const statusData = Object.entries(reportStats.value.statusStats).map(([name, value]) => ({
      name,
      value,
    }))

    statusChart.setOption({
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)',
      },
      legend: {
        orient: 'vertical',
        right: 10,
        top: 'center',
        data: statusData.map((item) => item.name),
      },
      series: [
        {
          name: '状态分布',
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2,
          },
          label: {
            show: false,
            position: 'center',
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '15',
              fontWeight: 'bold',
            },
          },
          labelLine: {
            show: false,
          },
          data: statusData,
        },
      ],
    })
  }
}

// 查询
const handleQuery = () => {
  queryParams.current = 1
  loadReportList()
}

// 重置查询
const resetQuery = () => {
  queryParams.current = 1
  queryParams.keyword = ''
  dateRange.value = []
  // queryForm.value?.resetFields() // 如果 queryForm 是 ElFormInstance，可以这样重置
  loadReportList()
}

// 页码改变
const handleCurrentChange = (val: number) => {
  console.log('页码改变:', val)
  queryParams.current = val
  loadReportList()
}

// 每页数量改变
const handleSizeChange = (val: number) => {
  console.log('每页条数改变:', val)
  queryParams.size = val
  loadReportList()
}

// 表格选择行变化
const handleSelectionChange = (selection: InjuryReport[]) => {
  console.log('选中行变化:', selection)
  selectedReports.value = selection
}

// 查看详情
const handleDetail = (row: InjuryReport) => {
  currentReport.value = { ...row }

  // 收集所有图片URL
  injuryImages.value = [
    row.injuryImage1,
    row.injuryImage2,
    row.injuryImage3,
    row.injuryImage4,
    row.injuryImage5,
    row.injuryImage6,
  ].filter((url): url is string => !!url) // 过滤掉null和undefined值

  hasInjuryImages.value = injuryImages.value.length > 0
  detailDialogVisible.value = true
}

// 批量导出
const handleExport = () => {
  if (exportType.value === 'selected' && selectedReports.value.length === 0) {
    ElMessage.warning('请先选择要导出的伤病报告')
    return
  }

  exportDialogVisible.value = true
}

// 确认导出
const confirmExport = async () => {
  exportLoading.value = true
  try {
    let dataToExport: InjuryReport[] = []

    if (exportType.value === 'selected') {
      // 导出选中的数据
      dataToExport = [...selectedReports.value]
    } else if (exportType.value === 'filtered') {
      // 导出筛选后的数据
      const params = { ...queryParams }
      if (dateRange.value && dateRange.value.length === 2) {
        params.startDate = dateRange.value[0]
        params.endDate = dateRange.value[1]
      }

      const res = await getInjuryReports(params)
      if (res.code === 200) {
        dataToExport = res.data.records
      } else {
        ElMessage.error('获取数据失败')
        exportLoading.value = false
        return
      }
    } else if (exportType.value === 'custom') {
      // 导出自定义条件的数据
      const exportQuery: InjuryReportQueryParams = {
        current: 1,
        size: 1000, // 导出时获取更多数据
      }

      if (exportDateRange.value && exportDateRange.value.length === 2) {
        exportQuery.startDate = exportDateRange.value[0]
        exportQuery.endDate = exportDateRange.value[1]
      }

      const res = await getInjuryReports(exportQuery)
      if (res.code === 200) {
        dataToExport = res.data.records
      } else {
        ElMessage.error('获取数据失败')
        exportLoading.value = false
        return
      }
    }

    // 准备Excel数据
    const exportData = dataToExport.map((item) => ({
      报告ID: item.id,
      学生: item.username,
      标题: item.title,
      受伤部位: item.bodyPart,
      严重程度: item.severity,
      状态: item.status,
      伤病描述: item.description,
      受伤时间: formatDateTime(item.injuryTime),
      提交时间: formatDateTime(item.createdAt),
      伤病图片: getInjuryImagesText(item),
    }))

    // 创建工作簿和工作表
    const worksheet = XLSX.utils.json_to_sheet(exportData)

    // 设置列宽
    const columnWidths = [
      { wch: 8 }, // 报告ID
      { wch: 10 }, // 学生
      { wch: 20 }, // 标题
      { wch: 10 }, // 受伤部位
      { wch: 10 }, // 严重程度
      { wch: 10 }, // 状态
      { wch: 40 }, // 伤病描述
      { wch: 20 }, // 受伤时间
      { wch: 20 }, // 提交时间
      { wch: 50 }, // 伤病图片
    ]
    worksheet['!cols'] = columnWidths

    const workbook = XLSX.utils.book_new()
    XLSX.utils.book_append_sheet(workbook, worksheet, '伤病报告')

    // 生成Excel文件并下载
    const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })

    // 创建Blob对象
    const blob = new Blob([excelBuffer], {
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    })

    // 创建下载链接
    const now = new Date()
    const fileName = `伤病报告_${now.getFullYear()}${(now.getMonth() + 1).toString().padStart(2, '0')}${now.getDate().toString().padStart(2, '0')}${now.getHours().toString().padStart(2, '0')}${now.getMinutes().toString().padStart(2, '0')}.xlsx`

    // 下载文件
    const link = document.createElement('a')
    link.href = URL.createObjectURL(blob)
    link.download = fileName
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)

    ElMessage.success('导出成功')
    exportDialogVisible.value = false
  } catch (error) {
    console.error('导出出错', error)
    ElMessage.error('导出失败')
  } finally {
    exportLoading.value = false
  }
}

// 获取伤病图片链接文本
const getInjuryImagesText = (report: InjuryReport) => {
  const images = [
    report.injuryImage1,
    report.injuryImage2,
    report.injuryImage3,
    report.injuryImage4,
    report.injuryImage5,
    report.injuryImage6,
  ].filter((url) => !!url)

  if (images.length === 0) {
    return '无图片'
  }

  // 将图片URL格式化为Excel友好的格式
  return images.map((url, index) => `图片${index + 1}: ${url}`).join('\n')
}

// 图片相关
const previewImage = (imageUrl: string) => {
  console.log('预览图片:', imageUrl) // 添加日志，帮助调试
  previewImageUrl.value = imageUrl
  previewVisible.value = true
}
</script>

<style scoped>
.health-report-container {
  padding: 20px;
}

.stats-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stats-content {
  min-height: 300px;
}

.stats-item {
  text-align: center;
  padding: 20px 0;
}

.stats-number {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
}

.stats-label {
  margin-top: 10px;
  color: #909399;
}

.chart-title {
  text-align: center;
  margin-bottom: 10px;
  font-weight: bold;
}

.chart-container {
  height: 250px;
}

.search-form {
  margin-bottom: 20px;
  .el-form-item {
    margin-bottom: 15px;
  }
}

.header-operations {
  display: flex;
  gap: 10px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.injury-images {
  margin-top: 20px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  border-left: 4px solid #409eff;
  padding-left: 10px;
}

.image-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.image-item {
  width: 150px;
  height: 150px;
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #ebeef5;
  background-color: #f5f7fa;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;

  :deep(.el-image) {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
}

.report-detail-dialog {
  :deep(.el-dialog__body) {
    max-height: 75vh;
    overflow-y: auto;
    padding: 20px;
  }

  :deep(.el-dialog) {
    margin-top: 5vh !important;
    display: flex;
    flex-direction: column;
    max-height: 85vh;
  }
}

.report-detail-content {
  padding-right: 10px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  padding: 10px 0;
}

/* Added CSS rules to attempt to fix el-select display issue */
:deep(.el-select .el-input__inner) {
  color: #606266 !important; /* Element Plus default text color, try to force it */
  opacity: 1 !important; /* Ensure it's not transparent */
  /* background-color: #fff !important; */ /* Optional: force background if needed */
}

:deep(.el-select .el-input .el-input__inner) {
  color: #606266 !important;
  opacity: 1 !important;
}

:deep(.el-select__selected-item) {
  color: #606266 !important;
  opacity: 1 !important;
  display: inline-block !important; /* Ensure it's displayed */
}

/* If the placeholder is somehow still visible and covering the selected text */
:deep(.el-select .el-select__placeholder.is-transparent) {
  display: none !important;
}
</style>
